<template>
  <!-- 质检判定 -->
  <div id="QualityTest">
    <root name="QualityTest">
      <SafeHeader
        v-bind="{
          title: '质检判定',
          isBack: true,
          fixedTop: true,
        }"
      />
      <div>
        <v-container style="height: 80px">
          <v-card outlined class="py-4" height="70px">
            <v-row class="ma-0 mb-4">
              <v-col class="py-1">
                <v-text-field
                  :prepend-icon="mdiCreditCardScan"
                  clearable
                  class="my-0 inputPlaceholder"
                  @keydown.13="scanGenerateCode"
                  dense
                  
                  hide-details
                  v-model="scanInfo"
                  placeholder="请扫描收货标签"
                ></v-text-field>
              </v-col>
            </v-row>
          </v-card>
        </v-container>

        <v-container>
          <v-card outlined class="py-4">
            <v-row class="ma-0 mb-4">
              <v-col class="py-0" cols="12">
                <v-text-field
                  label="收货单号"
                  dense
                  readonly
                  hide-details
                  v-model="formData.billCode"
                >
                </v-text-field>
              </v-col>
            </v-row>

            <v-row class="ma-0 mb-4">
              <v-col class="py-0" cols="12">
                <v-text-field
                  label="物料"
                  dense
                  readonly
                  hide-details
                  v-model="formData.itemCode"
                ></v-text-field>
              </v-col>
            </v-row>
            <v-row class="ma-0 mb-4">
              <v-col class="py-0" cols="12">
                <v-text-field
                  label="批次"
                  dense
                  readonly
                  v-model="formData.batchName"
                  hide-details
                ></v-text-field>
              </v-col>
            </v-row>

            <v-row class="ma-0 mb-4">
              <v-col class="py-0" cols="12">
                <v-text-field
                  label="收货数量"
                  dense
                  readonly
                  v-model="formData.qty"
                  hide-details
                ></v-text-field>
              </v-col>
            </v-row>

            <v-row class="ma-0 mb-4">
              <v-col
                cols="12"
                class="card-title"
                style="padding-bottom: 8px; padding-top: 8px"
                >质检结果</v-col
              >
            </v-row>

            <v-radio-group
              mandatory
              column
              v-model="qcForm.qcResult"
              row
              height="10px"
            >
              <v-row class="ma-0 ml-5 mb-3">
                <v-radio label="合格" value="1"> </v-radio>
                <v-radio label="不合格" value="0" class="ml-8"> </v-radio>
                <v-radio label="让步" value="2" class="ml-4"> </v-radio>
              </v-row>
            </v-radio-group>

            <v-row class="ma-0 mb-3">
              <v-col :span="8">
                <v-col
                  class="py-0 d-flex align-center font-weight-bold"
                  style="font-size: 15px"
                >
                  合格数
                </v-col>
                <v-col>
                  <v-text-field
                    dense
                    hide-details
                    v-model.number="qcForm.qualifiedQuantity"
                    height="20px"
                    type="number"
                  ></v-text-field>
                </v-col>
              </v-col>

              <v-col :span="8">
                <v-col
                  class="py-0 d-flex align-center font-weight-bold"
                  style="font-size: 15px"
                >
                  不合格数
                </v-col>

                <v-col>
                  <v-text-field
                    dense
                    hide-details
                    v-model.number="qcForm.fiedQuantity"
                    height="20px"
                    type="number"
                  ></v-text-field>
                </v-col>
              </v-col>

              <v-col :span="8">
                <v-col
                  class="py-0 d-flex align-center font-weight-bold"
                  style="font-size: 15px"
                >
                  让步数
                </v-col>
                <v-col>
                  <v-text-field
                    dense
                    type="number"
                    hide-details
                    v-model.number="qcForm.concessionQuantity"
                    height="20px"
                  ></v-text-field>
                </v-col>
              </v-col>
            </v-row>
          </v-card>
        </v-container>

        <div v-show="hidshow" class="footer">
          <v-bottom-navigation>
            <v-row class="ma-0 pa-2">
              <v-col class="pa-0">
                <v-btn
                  block
                  color="#193690"
                  dark
                  style="height: 100%; border-radius: 8px"
                  ><span
                    style="color: #fff; font-size: 15px"
                    class="font-weight-bold"
                    @click="submit"
                    >提交</span
                  ></v-btn
                >
              </v-col>
            </v-row>
          </v-bottom-navigation>
        </div>
      </div>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "../../components/safeHeader_wms";
import { mdiCreditCardScan } from "@mdi/js";
import _ from "lodash";
import { printToJiaBo } from "@/static/print";
// import Message from "@/components/message_box_wms/index";
// import Storage from "@/utils/storage.js";
import wms from "@/utils/business_wms";
// import { apiList } from "@/static/apiList";
export default {
  name: "QualityTest",
  components: {
    SafeHeader,
    Root,
  },
  data() {
    return {
      docmHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      hidshow: true,
      overlay: false,
      valid: false,
      mdiCreditCardScan: mdiCreditCardScan,
      loading: false,
      scanInfo: "",
      formData: {
        billCode: "", //收货单号
        itemCode: "",
        batchName: "",
        boxCode: "",
        qty: "",
      },
      qcForm: {
        // 仓库编码 获得当前仓库的编码
        wareId: localStorage.getItem("wareId"),
        // 收货单编码
        billCode: "",
        // 合格数量
        qualifiedQuantity: 0,
        // 不合格数量
        fiedQuantity: 0,
        //  让步数量
        concessionQuantity: 0,
        // 质检结果--默认是合格的
        qcResult: 1,
      },

      ctItemNum: "", //收货单的数量
      ctNum: "1", //每次生成一个
      ctInfoList: [],
    };
  },
  methods: {
    // 收货标签扫码回车处理
    scanGenerateCode() {
      let scanData = this.scanInfo.split("---");
      this.formData.billCode = scanData[0];
      this.formData.itemCode = scanData[1];
      this.formData.itemName = scanData[2];
      this.formData.batchName = scanData[3];
      this.formData.qty = scanData[4];
      this.qcForm.billCode = scanData[0];
    },

    //提交数据
    submit() {
      //判断数据是否齐套
      if (!this.formData.billCode) {
        alert("无数据");
        return false;
      }
      //判断数量是否正确
      if (
        this.formData.qty !=
        (this.qcForm.qualifiedQuantity +
          this.qcForm.fiedQuantity +
          this.qcForm.concessionQuantity)
      ) {
        alert("填写数量总和不等于收货数量");
        return false;
      }
        console.log(JSON.stringify(this.qcForm))
      //请求后台
      this.overlay = true;
      wms
        .get({ url: "/qc/records/result", data: this.qcForm })
        .then((res) => {
            console.log(JSON.stringify(res));
          if (res.status == 200 && res.data.code == 200) {
            console.log(JSON.stringify(res.data));
            alert("提交成功")
            //刷新页面
            window.location.reload();
          } else {
              this.overlay = false;
              alert(res.data.message);
          }
        });
    },
  },

  mounted() {
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
  },

  watch: {
    showHeight: function () {
      if (this.docmHeight > this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  padding-top: 65px;
  width: 100%;
  bottom: 0;
}
</style>

<style lang="sass" scoped>
.scanContainer
>.row
    margin: 0
    padding: 10px

.QualityTest_table
::v-deep .v-data-table__mobile-table-row
    margin: 4px 8px
    background-color: #e8e8e8f1
::v-deep .v-data-table__mobile-row
    min-height: 28px !important
    // 暂无数据的显示
::v-deep .v-data-table__empty-wrapper
    display: flex
    justify-content: center
    align-items: center
    td
        line-height: 48px

.inputPlaceholder
::v-deep.v-text-field__slot
input::-webkit-input-placeholder
    font-size: 15px
    input::-moz-placeholder
        font-size: 15px
    input:-moz-placeholder
        font-size: 15px
    input:-ms-input-placeholder
        font-size: 15px
</style>